<template>
    <div>
        <bufantop></bufantop>
       
            <div class="branddetail">
                <img :src="list.list_pic_url" alt="">
                <h3>{{list.name}}</h3>
            </div>
            
            <p class="desc">{{list.simple_desc}}</p>
        

        <van-grid :border="false" :column-num="2">
            <van-grid-item class="listGoods" v-for="item in listGoods" :key="item.id">
                <img :src="item.list_pic_url" />
                <p>{{item.name}}</p>
                <p class="price">¥{{item.retail_price}}</p>
            </van-grid-item>
        </van-grid>



    </div>
</template>



<script>
import {detailaction} from "@/api/home/branddetail/index.js"
import bufantop from "@/components/bufantop.vue"
export default {
    data(){
        return{
            list:[],
            listGoods:[],
        }
    },
    components:{
        bufantop
    },
    created(){
        console.log(this.$route.query.id);
        detailaction({
            id:this.$route.query.id
        }).then(res=>{
            console.log(res);
            this.list=res.data;
            this.listGoods=res.goodsList;
        })
    }
}
</script>

<style lang="scss" scoped>
#app{
    background-color: #F4F4F4;
}
// 头部banner图片
.branddetail{
    width: 375px;
    height: 145px;
    position: relative;
}
.branddetail img{
    width: 100%;
    height: 100%;
}
.branddetail h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    border-bottom: 2.5px solid rgb(255, 255, 255);
}
// 头部下文字
.desc{
    color: rgb(102, 102, 102);
    font-size: 15px;
    padding: 21px 16px;
    background-color: #fff;
}
// 商品列表
.listGoods{
    width: 96%;
}
.listGoods img{
    width: 151px;
    height: 151px;
}
.price{
    margin: 15px 0;
    color: #b4282d;
    
}
</style>